<template>
  <div class="all">
    <div class="asdxzxz"><img :src="video.image" alt="" /></div>
    <div><img src="video" alt="" /></div>
    <div class="alzx">恭喜你获得 {{ video.title }}</div>
    <div class="asd">
      <el-button type="warning" class="lingqu" @click="yesdata"
        >确认领取</el-button
      >
    </div>
    <div class="dellon">
      <el-dialog
        title="收货信息"
        :visible.sync="dialogVisible"
        width="90%"
        align="center"
        style="border-radius: 10px"
        :show-close="false"
        :append-to-body="true"
      >
        <div>
          <div
            class="inputDeep"
            style="line-height: 40px; border-bottom: 1px solid #ebedf0"
          >
            收货地址
            <el-input
              v-model="Alldata.address"
              placeholder="请输入地址"
              style="float: right; width: 70%; border: none"
            ></el-input>
            <div style="clear: both"></div>
          </div>
          <div
            class="inputDeep"
            style="line-height: 40px; border-bottom: 1px solid #ebedf0"
          >
            收货人<el-input
              v-model="Alldata.recipientName"
              placeholder="请输入姓名"
              style="float: right; width: 70%; border: none"
            ></el-input>
            <div style="clear: both"></div>
          </div>
          <div
            class="inputDeep"
            style="line-height: 40px; border-bottom: 1px solid #ebedf0"
          >
            联系方式<el-input
              v-model="Alldata.recipientPhone"
              placeholder="请输入电话"
              style="float: right; width: 70%; border: none"
            ></el-input>
            <div style="clear: both"></div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button class="but" @click="dialogVisible = false"
            >取 消</el-button
          >
          <el-button
            type="primary"
            class="but"
            style="background-color: orange; border-color: orange"
            @click="lastSumit"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import { MessageBox, Toast } from "mint-ui";

export default {
  data() {
    return {
      dialogVisible: false,
      video: "",
      Alldata: {
        address: "",
        recipientName: "",
        recipientPhone: "",
      },
    };
  },
  created() {
    console.log(this.$route.query.row,'this.$route.query.row')
    this.video =this.$route.query.row;
    this.Alldata.id = this.video.id;
    console.log(this.video);
  },
  methods: {
    yesdata() {
      console.log("传输");
      console.log(this.video);
      // type:0是实物奖品   1、2虚拟奖品
      if (this.video.prizesType == 0 || this.video.prizesType == 1) {
        this.dialogVisible = true;
      }
    },
    lastSumit() {
      console.log("最后通牒", this.Alldata);
      let data = this.Alldata;
      if (
        data.address == "" ||
        data.recipientName == "" ||
        data.recipientPhone == ""
      ) {
        this.$message({
          message: "请准确填写信息！",
          type: "warning",
        });
      } else {
        request({
          url: "/generator/userprizes/front/update",
          method: "post",
          data: data,
        }).then((response) => {
          console.log(response);
          Toast(`发送成功`);
          this.dialogVisible = false;
          this.$router.go(-1);
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.alzx {
  background: #dddd;
  text-align: center;
  padding: 20px;
}
.asd {
  // border: 1px solid red;
  text-align: center;
  padding: 20px;
}
.asdxzxz img {
  width: 100%;
}
.dellon {
  // border: 1px solid red;
  height: 100%;
}
.lingqu {
  color: #fff;
  background-color: orange;
  border: none;
  min-width: 150px;
  border-radius: 30px;
}
.but {
  height: 44px;
  width: 48%;
  border-radius: 30px;
}
.el-dialog {
  border-radius: 10px !important;
}
/deep/.el-input__inner {
  border: none !important;
}
/deep/.el-dialog {
  border-radius: 10px;
}
</style>